<template>
  <div class="c-select">
    <div class="select-header">
      <div class="select-header-text">筛选</div>
      <div class="select-header-close">
        <!-- <img src="./img/close.png" @click="handleClose" /> -->
        <van-icon
          class="select-header-close-icon"
          name="cross"
          @click="handleClose"
        />
      </div>
    </div>
    <div class="c-a0ttpa" :style="{ height: contentHeight }">
      <div class="select-list">
        <div class="select-list-item">
          <div class="select-list-item-title">出单方式</div>
          <div class="select-list-item-content">
            <van-row>
              <van-col
                span="8"
                class="select-list-item-content-item"
                :class="prodMeSel.includes(item.value) ? 'select-active' : ''"
                v-for="item in productMethodList"
                :key="item.value"
                @click="handleClick(item, prodMeSel,'orgType')"
              >
                {{ item.label }}
              </van-col>
            </van-row>
          </div>
        </div>
        <div class="select-list-item">
          <div class="select-list-item-title">合作机构</div>
          <div class="select-list-item-content">
            <van-row>
              <van-col
                span="8"
                class="select-list-item-content-item"
                :class="orgSel.includes(item.value) ? 'select-active' : ''"
                v-for="item in orgList"
                :key="item.value"
                @click="handleClick(item, orgSel, 'multi')"
              >
                {{ item.label }}
              </van-col>
            </van-row>
          </div>
        </div>
        <div class="select-list-item">
          <div class="select-list-item-title">产品类型</div>
          <div class="select-list-item-content">
            <van-row>
              <van-col
                span="8"
                class="select-list-item-content-item"
                :class="proTypeSel.includes(item.value) ? 'select-active' : ''"
                v-for="item in proTypeList"
                :key="item.value"
                @click="handleClick(item, proTypeSel,'proType')"
              >
                {{ item.label }}
              </van-col>
            </van-row>
          </div>
        </div>
      </div>
    </div>

    <div class="select-bottom flex-row">
      <div class="select-bottom-item" @click="handleReset">重置</div>
      <div class="select-bottom-item" @click="handleConfirm">确认</div>
    </div>
  </div>
</template>
<script>
import Cookie from 'js-cookie'
export default {
  props: {
    // 出单方式
    productType: {
      type: String,
      default: () => []
      // 'N'
    },
    // 出单方式列表
    productMethodList: {
      type: Array,
      default: () => []
    },
    // 合作机构列表
    orgList: {
      type: Array,
      default: () => []
    },
    // 产品子类型列表
    proTypeList: {
      type: Array,
      default: () => []
    },
    /* //筛选的图标是否高亮
    screenFlag: {
      type: Boolean,
      default: true
    } */
  },
  data() {
    return {
      prodMeSel: this.productType ? [this.productType] : [],
      orgSel: [],
      proTypeSel: [],
      contentHeight: '',
      selectedVal:undefined,
      itemList: {
        prodMeSel: '', //存储出单方式cookie
        orgSel: [], //存储合作机构cookie
        proTypeSel: '' //存储产品类型cookie
      },
      cookieprodMeSel: '',
      cookieOrgSel: [],
      cookieProTypeSel: '',
      promeSelFlag: true,
      orgSelFlag: true,
      proTypeFlag: true,
      cookieItem:{}, //全局的存储cookie
      screenFlag:true
    }
  },
  mounted() {
    let data = window.innerHeight + 'px'
    this.contentHeight = `calc(${data} - 30px - 50px - 20px`
    if(Cookie.get('cookieProTypeSel')) {
      let cookieProTypeSel = Cookie.get('cookieProTypeSel')
      // console.log('cookieProTypeSel:',cookieProTypeSel)
      this.proTypeSel.push(cookieProTypeSel) 
    }
    if(Cookie.get('cookieprodMeSel')) {
      let cookieprodMeSel = Cookie.get('cookieprodMeSel')
      // console.log('cookieprodMeSel:',cookieprodMeSel)
      this.prodMeSel.push(cookieprodMeSel) 
    }
    if(Cookie.get('cookieOrgSel')) {
      let cookieOrgSel = JSON.parse(Cookie.get('cookieOrgSel'))
      if(cookieOrgSel.length > 0) {
        this.orgSel = cookieOrgSel
      }
    }

  },
  methods: {
    handleClose() {
      this.$emit('close', false)
    },
    handleClick(item, data, type) {
      // console.log('产品类型',item,data,type)
      if (type && type === 'multi') {
        if (data.includes(item.value)) {
          data.splice(data.indexOf(item.value), 1)
          if(data.length == 0) {
            this.cookieOrgSel = []
            Cookie.remove('cookieOrgSel')
          }
        } else {
          data.push(item.value)
        }
      } else {
        if (data.includes(item.value)) {
          data.splice(data.indexOf(item.value), 1)
          if(type == 'orgType') {
            Cookie.set("cookieprodMeSel",'',-1)
            this.promeSelFlag = false
          }
          if(type == 'proType') {
            Cookie.set("cookieProTypeSel",'',-1)
            this.proTypeFlag = false
          }
        } else {
          data.splice(0, 1)
          data.push(item.value)
        }
      }
      
      data.forEach(curr => {
        if(typeof curr == 'number') {
          this.cookieOrgSel.push(curr)
          this.cookieOrgSel = [... new Set(this.cookieOrgSel)]
        }
        if(typeof curr == 'string' && (curr == 'N' || curr == 'Y')) {
          this.cookieprodMeSel = curr
        }
        if(typeof curr == 'string' && Number(curr)) {
          // console.log('点击时的产品类型：',curr,'+++++',this.cookieProTypeSel)
          this.cookieProTypeSel = curr
          // console.log(this.cookieProTypeSel)
        }
      })
    },
    handleReset() {
      this.prodMeSel = []
      this.orgSel = []
      this.proTypeSel = []
      this.screenFlag = true
      Cookie.remove('paramsPro')
      Cookie.remove('cookieprodMeSel')
      Cookie.remove('cookieOrgSel')
      Cookie.remove('cookieProTypeSel')
      this.$emit('reset', {
        prodMeSel: this.prodMeSel,
        orgSel: this.orgSel,
        proTypeSel: this.proTypeSel,

        partnerId: this.orgSel,
        isOnline: this.prodMeSel.length > 0 ? this.productType : '',
        productSubType: this.proTypeSel.length > 0 ? this.proTypeSel[0] : '',
        screenFlag: this.screenFlag
      })
    },
    handleConfirm() {
      // let newOrgSel = [... new Set(this.itemList.orgSel)]
      let newOrgSel = [... new Set(this.cookieOrgSel)]
      // this.itemList.orgSel = newOrgSel
      this.cookieOrgSel = newOrgSel
      Cookie.set('cookieOrgSel',this.cookieOrgSel)
      if(this.promeSelFlag) {
        Cookie.set('cookieprodMeSel',this.cookieprodMeSel)
      }
      if(this.proTypeFlag) {
        // console.log('存储的产品类型：',this.cookieProTypeSel)
        Cookie.set('cookieProTypeSel',this.cookieProTypeSel)
      }
      
      if(JSON.parse(Cookie.get('cookieOrgSel')).length > 0 || Cookie.get('cookieprodMeSel') || Cookie.get('cookieProTypeSel')) {
        this.screenFlag = false
      }else {
        this.screenFlag = true
      }
      // console.log('提交时产品类型：',this.proTypeSel)
      let params = {
        prodMeSel: this.prodMeSel,
        orgSel: this.orgSel,
        proTypeSel: this.proTypeSel,
        partnerId: this.orgSel,
        isOnline: this.prodMeSel.length > 0 ? this.prodMeSel[0] : '',
        productSubType: this.proTypeSel.length > 0 ? this.proTypeSel[0] : '',
      }
      // console.log('isOnline',this.cookieProTypeSel,this.cookieProTypeSel ?1:2)
      Cookie.set('paramsPro',params)
      this.$emit('confirm', {
        prodMeSel: this.prodMeSel,
        orgSel: this.orgSel,
        proTypeSel: this.proTypeSel,
        partnerId: this.orgSel,
        isOnline: this.prodMeSel.length > 0 ? this.prodMeSel[0] : '',
        productSubType: this.cookieProTypeSel ? this.cookieProTypeSel : '',
        screenFlag: this.screenFlag
      })
    }
  }
}
</script>
<style scoped lang="less">
.c-a0ttpa {
  // height: calc(100vh - 30px - 50px - 20px);
  overflow-y: scroll;
}
.c-select {
  padding: 15px;
  position: relative;
  .select-header {
    position: relative;
    &-text {
      font-size: 18px;
      color: #333;
      text-align: center;
    }
    &-close {
      img {
        width: 17px;
        height: 18px;
        position: absolute;
        right: 15px;
        top: 0;
      }
      &-icon {
        position: absolute;
        right: 15px;
        top: 0;
        font-size: 22px;
      }
    }
  }
  .select-bottom {
    position: fixed;
    bottom: 10px;
    margin-top: 20px;
    .select-bottom-item {
      width: 120px;
      height: 35px;
      border-radius: 17.5px;
      background: @c-color-primary;
      color: #fff;
      text-align: center;
      line-height: 35px;
      font-size: 15px;
      &:first-child {
        border: 1.5px solid #666;
        background: #fff;
        margin-right: 25px;
        margin-left: 4px;
        color: #666;
      }
    }
  }
}
.select-list-item {
  margin-top: 10px;
  .select-active {
    background: @c-color-primary;
    color: #fff;
  }
  &-title {
    font-size: 15px;
    color: #333;
    font-weight: bold;
    margin-bottom: 20px;
  }
  &-content {
    &-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80px;
      height: 30px;
      margin-right: 8px;
      margin-bottom: 8px;
      // line-height: 30px;
      border-radius: 4px;
      background-color: #f5f5f5;
      color: #999;
      font-size: 13px;
      // text-align: center;
    }
  }
}
</style>
